<template>
  <v-edit-title :element="element" :index="index" :total="total">
    <a-radio-group v-model="value" class="c-item" @change="onChange">
      <div v-for="(item, i) in element.content" :key="item.id" class="items">
        <div class="item">
          <a-radio :style="radioStyle" :value="item.value" />
          <v-edit-span v-model="item.name" />
          <a-icon type="close" class="red-icon" @click.stop="remove(i)" />
        </div>

        <a-textarea
          v-if="item.questionChoiceType && item.value === value"
          class="item_input"
          placeholder="填写内容..."
          :auto-size="{ minRows: 3, maxRows: 5 }"
        />
      </div>
    </a-radio-group>
    <br />
    <a-button @click="add">新增内容</a-button>
  </v-edit-title>
</template>
<script>
export default {
  components: {},
  props: {
    element: {
      type: Object,
      default() {
        return {
          title: '',
          content: [],
          id: -1,
        }
      },
    },
    index: Number,
    total: Number,
  },
  data() {
    return {
      value: 1,
      radioStyle: {
        display: 'block',
      },
    }
  },
  created() {
    console.log('content', this.element.content)
  },
  methods: {
    add() {
      const length = this.element.content.length + 1
      this.element.content.push({
        value: length,
        id: length,
        name: '新增的内容',
      })
    },
    remove(index) {
      this.element.content.splice(index, 1)
    },
    onChange(item, index) {
      // console.log('onChange', item, index)
      item.checked = true
      this.forceUpdate(item, index)

      // 处理选项互斥的交互
      this.excludeList(item, index)
      this.submit()
    },
    // 若当前选中选项，将其他互斥选项设置为“未选中”状态
    excludeList(item, index) {
      this.element.content.forEach((child, i) => {
        if (index !== i && item.checked) {
          child.checked = false
          this.forceUpdate(child, i)
        }
      })
    },
    onBlur() {
      this.submit()
    },
    submit() {
      this.$emit('complete')
    },
    forceUpdate(item, index) {
      this.$set(this.element.content, index, item)
    },
    // onChange(event) {
    //   console.log(
    //     this.header,
    //     JSON.stringify(this.element.content),
    //     event.nativeEvent.target
    //   );
    // },
  },
}
</script>
<style scoped lang="less">
.c-title-container_content .c-item {
  margin-bottom: 14px;

  .ant-radio-wrapper {
    white-space: normal;
    display: flex;
  }
}
.items {
margin-bottom: 14px;
}
.item {
  display: flex;
  flex-direction: row;

}
.item_input {
  margin-top: 14px;
}
</style>
<style lang="less">
.c-title-container_content .c-item .ant-radio-wrapper .ant-radio {
  margin-top: 1px !important;
}
</style>
